<template>
  <div class="webStatusConfig">
    <div class="tool">
      <div style="float: left">
        <span class="main-color" @click='webStatusFetchData'><i class="iconfont icon-shuaxin"></i><span>刷新</span></span>
        <el-input
          style="width: 300px"
          size="mini"
          placeholder="请输入状态名称进行查询"
          @input="handlerClick"
          v-model.trim="query">
          <i class="el-input__icon el-icon-search" slot="suffix" @click="handlerClick"></i>
        </el-input>
      </div>
    </div>
    <div class="table-wapper">
      <el-table :data="webStatusList" size="mini" stripe style="width: 100%">
        <el-table-column label="状态名称" prop='webStatusName'></el-table-column>
        <el-table-column label="状态编号">
          <template slot-scope="scope">
            编号：{{scope.row.webStatusId}}
          </template>
        </el-table-column>
        <el-table-column label="最后更新时间" prop='updateTime'></el-table-column>
        <el-table-column label="操作" width='150'>
          <template slot-scope="scope">
          <div>
            <el-button @click="handleClick(scope)" type="text" size="small" class = 'modify'>修改</el-button>
            <el-button type="text" size="small" :class = '[{oper: scope.row.isEnable === "1"}]' @click = 'enableModify(scope)'>{{scope.row.isEnable === "0" ? "启用" : "停用"}}</el-button>
          </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <left-slide :visible.sync='slideLeft' :title='"修改状态"' :isWebStatus="true" :showFooter='true'  @cancelClick = 'slideCancelClick' @saveClick = 'slideSaveClick'>
      <div class='modifyWebStatus'>
        <el-form :model="webStatusForm" :rules="rules" ref="modifyStatusForm">
          <div class='modifyWebStatus'>
            <p>名称</p>
            <el-form-item prop="webStatusName">
              <el-input size="mini" :maxlength="8" v-model="webStatusForm.webStatusName"></el-input>
            </el-form-item>
          </div>
          <div class='modifyWebStatus'>
            <span>是否停用：</span>
            <el-radio-group v-model="webStatusForm.isEnable">
              <el-radio :label="'1'">启用</el-radio>
              <el-radio :label="'0'">停用</el-radio>
            </el-radio-group>
          </div>
          <div class='modifyWebStatus'>
            <p>编号</p>
            <el-input size="mini" v-model="webStatusForm.webStatusId" disabled></el-input>
          </div>
        </el-form>
      </div>
    </left-slide>
  </div>
</template>
<script>
import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
import { deepClone, getDateTime} from '@/utils/m7Utils.js'
export default {
  name: 'webStatusConfig',
  data () {
    return {
      query: '',
      webStatusList: [],
      searchStatusList: [],
      slideLeft: false,
      webStatusForm: {
        webStatusId: '',
        webStatusName: '',
        isEnable: '1'
      },
      rules: {
        webStatusName: [{ required: true, message: '请输入名称', trigger: 'blur' }, { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'change' }]
      }
    }
  },
  methods: {
    webStatusFetchData () {
      this.$store.dispatch('queryWebStatusConfig', {}).then(res => {
        if (res.success && res.data) {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              if (item.updateTime) {
                item.updateTime = getDateTime(new Date(item.updateTime))
              } else {
                item.updateTime = '--'
              }
            })
          }
          this.webStatusList = res.data
          this.searchStatusList = res.data
        }
      })
    },
    slideCancelClick () {
      this.slideLeft = false
      this.webStatusForm = {}
    },
    handlerClick () {
      let resultArr = []
      let queryStr = this.query
      if (queryStr) {
        for (var i = 0; i < this.searchStatusList.length; i++) {
          if (this.searchStatusList[i].webStatusName.indexOf(queryStr) !== -1) {
            resultArr.push(this.searchStatusList[i])
          }
        }
        this.webStatusList = resultArr
      } else {
        this.webStatusList = this.searchStatusList
      }
    },
    handleClick (item) {
      this.slideLeft = true
      this.webStatusForm = deepClone(item.row)
    },
    slideSaveClick () {
      this.$refs['modifyStatusForm'].validate((valid) => {
        if (valid) {
          let name = deepClone(this.webStatusForm.webStatusName)
          let flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
          if (flag.test(name)) {
            this.$message.error('请勿输入特殊字符')
            return false
          }
          this.saveWebStatusConfig()
        } else {
          return false
        }
      })
    },
    saveWebStatusConfig (item) {
      let reqData = item || this.webStatusForm
      this.$store.dispatch('saveWebStatusConfig', reqData).then((response) => {
        if (response.success) {
          this.webStatusFetchData()
          this.$message.success('修改成功！')
          this.slideLeft = false
          this.query = ''
          this.webStatusForm = {}
        }
      })
    },
    enableModify (item) {
      let reqData = deepClone(item.row)
      reqData.isEnable === '0' ? reqData.isEnable = '1' : reqData.isEnable = '0'
      this.saveWebStatusConfig(reqData)
    }
  },
  beforeMount () {
    this.webStatusFetchData()
  },
  components: {
    leftSlide
  }
}
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .webStatusConfig
    height calc(100% - 48px)
    box-sizing border-box
    overflow-y hidden
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    font-size: 12px;
    .margin-l-10
      margin-left 10px
    .pag-wapper
      position: absolute;
      right: 15px;
      top: 14px;
    .main-color
      color $c-main
      cursor pointer
      margin-right 20px
    .wapper
      display flex
      flex-direction column
    .tool
      position relative
      border 1px solid #e7e7eb
      border-bottom 0
      padding  12px 15px
      /*display flex*/
      justify-content space-between
    .primary_btn
      padding 0px 10px
      min-width 60px
    .del
      color $c-pink
    .oper
      color #FF6B6B
    .modifyWebStatus
      padding 20px
      font-size 12px
      box-sizing border-box
      .modifyWebStatus__input
        margin-bottom 20px
</style>